<script setup lang="ts">

</script>

<template>
	<div class="occupation-item">
		<div class="content">
			<div class="user">
				<img class="head" src="~/assets/user-head.png" alt="">
				<p class="info">
					<span class="name">汤波</span>
					<span class="work">提供技术咨询及代面试服务</span>
				</p>
			</div>
			<p class="evaluate">在这里60天轻松赚46000+， 比上班挣钱还容易。</p>
		</div>
	</div>
</template>

<style scoped lang="scss">
.occupation-item{
	width: 100%; // 使用灵活宽度而不是固定384px
	max-width: 384px; // 保持最大宽度限制
	height: 328px;
	background: url("~/assets/promotion-img.png") no-repeat;
	background-size: 100% 100%;
	box-shadow: 0px 0px 20px 0px rgba(11,13,18,0.06);
	border-radius: 24px 24px 24px 24px;
	border: 1px solid rgba(25,30,40,0.08);
	margin-bottom: 24px;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	// 移除固定的margin-right和伪选择器，由父容器的gap来控制间距
}
.content{
	width: 100%; // 使用100%而不是固定384px
	height: 220px;
	background: linear-gradient( 0deg, #FFFFFF 37%, rgba(255,255,255,0.08) 87%, rgba(255,255,255,0) 100%);
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	.user{
		flex: 1;
		display: flex;
		align-items: flex-end;
		margin-bottom: 8px;
		.head{
			width: 42px;
			height: 42px;
			margin-right: 8px;
		}
		.info{
			display: flex;
			flex-direction: column;
			.name{
				color: rgba(10, 51, 32, 1);
				font-weight: 600;
			}
			.work{
				color: rgba(10, 51, 32, .6)
			}
		}
	}
}
.evaluate{
	padding: 0 0 16px;
	color: #0A3320;
	font-size: 20px;
	font-weight: 600;
}

// 响应式设计
@media (max-width: 768px) {
	.occupation-item {
		height: 280px;
		margin-bottom: 16px;
	}
	
	.content {
		height: 180px;
		padding: 0 16px;
	}
	
	.evaluate {
		font-size: 18px;
		padding: 0 0 12px;
	}
}

@media (max-width: 480px) {
	.occupation-item {
		height: 260px;
		border-radius: 16px;
	}
	
	.content {
		height: 160px;
		padding: 0 12px;
		
		.user {
			.head {
				width: 36px;
				height: 36px;
			}
			
			.info {
				.name {
					font-size: 14px;
				}
				
				.work {
					font-size: 12px;
				}
			}
		}
	}
	
	.evaluate {
		font-size: 16px;
		padding: 0 0 10px;
	}
}
</style>